import { intoRecurse, deepCopy } from '@u/common.js';

export default {
  data() {
    return {
      pageName: '', // 对应页面的组件名
      treeSearchKey: {}, // 树形列表搜索参数
      treeId: 0, // 树形列表选中的数据 id
      treeData: [], // 树形列表数据
      delMessage: { // 树形列表删除按钮配置
        msg: '确定删除吗？',
        title: '删除确认',
        options: {}
      }
    };
  },
  created() {
    this.createFn && this.createFn();

    if (this.pageName) {
      this.getTreeData(this.treeFnCallback); // 进入页面调用树形列表接口，treeFnCallback 为调取接口后的回调，可在页面配置
    }
  },
  methods: {
    getTreeData(callback) { // 获取树形列表数据
      this.treeFn({ // treeFn 为树形列表接口，必须在页面配置
        params: {
          ...this.treeSearchKey,
        }
      }).then(res => {
        if (res.code == 200) {
          this.treeData = res.data;
          const treeId = callback && callback(res.data);
          if (res.data.length) {
            this.treeId = treeId || res.data[0].id;
          }
          if (callback) {
            const chains = this.$store.getters.pages[this.pageName]; // 传入页面的链式 id，用于展开树形列表到链式末尾的 id
            if (chains) { // 有传入链式 id，执行展开树形列表操作
              this.treeId = chains[chains.length - 1];
              if (chains.length) {
                const list = deepCopy(this.treeData);
                this.handleChainsCallback && this.handleChainsCallback(list, chains[0]);
                intoRecurse(list, (item, options) => {
                  const i = chains.findIndex(r => r == item.id);
                  if (i != -1) {
                    item.isOpen = true;
                  }
                  if (i == chains.length - 1) {
                    options.close = true;
                  }
                }, { childrenName: 'subList' });
                this.treeData = list;
              }
              this.$store.commit('layout/removePages', this.pageName); // 展开树形列表后，清除传入的链式 id
            }
          }
          this.getMainData(); // 调用页面右部分展示数据的接口，mainFnCallback 为调用接口后的回调，可在页面上设置
        }
      });
    },
    getMainData() { // 获取页面右部分展示的数据
      if (this.treeId) {
        this.mainFn(this.treeId).then(res => { // mainFn 为页面右部分展示数据的接口，必须在页面配置
          if (res.code == 200) {
            this.mainFnCallback && this.mainFnCallback(res.data);
          }
        });
      } else {
        this.mainFnCallback && this.mainFnCallback([]);
      }
    },
    changeTreeItem(item) { // 点击树形列表某条数据
      this.treeId = item.id;
      this.treeItemCallback && this.treeItemCallback(item); // treeItemCallback 为点击树形列表某条数据后的回调，可在页面配置
      this.getMainData();
    },
    del({ item, currentLevel, upOneLevel }, callback) { // 树形列表删除按钮的事件
      if (this.delTip && item.subList && item.subList.length) { // 存在子元素并且有 delTip 时提示并终止执行
        return this.$message.warning(this.delTip);
      }
      this.$confirm(this.delMessage.msg, this.delMessage.title, {
        type: 'warning',
        ...this.delMessage.options
      }).then(() => {
        this.delFn(item.id).then(res => { // delFn 为删除树形列表当条数据的接口，若使用删除按钮则必须在页面配置
          if (res.code == 200) {
            const itemIndex = currentLevel.findIndex(a => a.id == item.id);
            if (this.treeId == item.id) {
              if (currentLevel.length > 1) {
                const prev = Number(itemIndex) - 1,
                  next = Number(itemIndex) + 1;
                this.treeId = prev >= 0 ? currentLevel[prev].id : next < currentLevel.length ? currentLevel[next].id : 0;
              } else {
                if (upOneLevel.length) {
                  const upper = upOneLevel.find(up => {
                    return up.subList && up.subList.findIndex(r => r.id == item.id) != -1;
                  });
                  this.treeId = upper && upper.id;
                  this.delFnCallback && this.delFnCallback(upper);
                } else {
                  this.treeId = 0;
                }
              }
              this.getMainData();
            }
            if (itemIndex != -1) {
              currentLevel.splice(itemIndex, 1);
            }
            callback && callback(this.treeData); // 删除树形列表某条数据后的回调
          }
        });
      }).catch(() => {});
    }
  },
  components: {
    Tree: () => import('@c/Tree')
  }
};
